<template>
  <div class="shop-list-warpper">
    <!-- 表单 -->
    <div class="list-form">
      <el-form
        ref="ruleform"
        :inline="true"
        :model="shopForm"
        :rules="rulesForm"
        label-width="100px"
      >
        <el-form-item label="选择项目：" prop="project">
          <el-select v-model="shopForm.project" placeholder="请选择项目" clearable filterable>
            <el-option
              v-for="item in pageInfo.projectArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="修改状态：" prop="updateStatus">
          <el-select v-model="shopForm.updateStatus" placeholder="请选择修改状态" clearable filterable>
            <el-option
              v-for="item in pageInfo.updateStatusArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left: 10px;">
          <el-button type="primary" @click="submitForm('ruleform')">搜索</el-button>
          <el-button @click="resetForm('ruleform')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="list-table">
      <div class="table-handle">
        <el-button type="primary" plain @click="handleDelete(pageInfo.multipleSelection)">批量删除</el-button>
        <el-button type="primary" plain @click="handleEdit(pageInfo.multipleSelection)">创建修改任务</el-button>
      </div>
      <el-table
        :data="tableData"
        :header-cell-style="{ background: '#F7F8FA' }"
        border
        class="table-box"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column prop="shop_name" label="店铺名称" width="180" />
        <el-table-column prop="productName" label="项目名称" width="180" />
        <el-table-column prop="created_at" label="提交时间" width="200" />
        <el-table-column label="修改状态" width="120">
          <template slot-scope="scope">
            <span
              v-for="item in pageInfo.updateStatusArr"
              :key="item.value"
            >
              <span v-if="item.value === scope.row.update_status" :style="{color: item.color}">{{ item.label }}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="total_count" label="总任务数" width="100" />
        <el-table-column prop="success_count" label="成功数" width="100" />
        <el-table-column label="失败数" width="100">
          <template slot-scope="scope">
            <span :style="{color: scope.row.fail_count > 0 ? '#EE0000' : ''}">{{ scope.row.fail_count }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="desc" label="描述" width="200" />
        <el-table-column fixed="right" label="操作" min-width="150">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleDetail(scope.row)">查看详情</el-button>
            <el-button type="text" size="small" style="color: #EE0000;" @click="handleDelete([scope.row])">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="list-pagina">
        <el-pagination
          :page-size="paginaInfo.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :current-page="paginaInfo.pageIndex"
          :total="paginaInfo.total"
          layout="total, sizes, prev, pager, next, jumper"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 封装的组件 -->
    <div>
      <detail
        :detail-info="detailInfo"
      />
    </div>
  </div>
</template>

<script>
import { getUpdateTaskPagelist } from '@/api/shop-manage'
import Detail from './update-record-components/detail.vue'
export default {
  components: { Detail },
  data() {
    return {
      // 前端定义的数据全都小写，注意接口数据的大小写哈
      pageInfo: {
        multipleSelection: [],
        projectArr: [
          { label: '全部', value: -1 },
          { label: '标题', value: 0 },
          { label: '价格', value: 1 },
          { label: '运费模板', value: 2 }
        ],
        // 完成状态 -1 全部  0-进行中 1-已完成
        updateStatusArr: [
          {
            label: '全部',
            value: -1,
            color: '#FFA700'
          },
          {
            label: '进行中',
            value: 0,
            color: '#4E78EF'
          },
          {
            label: '已完成',
            value: 1,
            color: '#16BE4F'
          }
        ]
      },
      shopForm: {
        project: -1,
        updateStatus: -1
      },
      rulesForm: {

      },
      tableData: [],
      // 页码。pageIndex：第几页；pageSize：一页几条；total：总数据量
      paginaInfo: {
        pageIndex: 1,
        pageSize: 20,
        total: 0
      },
      detailInfo: {}
    }
  },
  created() {
    const result = {
      'data': {
        'data': [
          {
            'push_update_goods_id': 1768523994975309824, // 任务Id
            'shop_platform': 3,
            'shop_code': '1391171890',
            'shop_name': '豆丢的甄选',
            'update_type': 1, // 修改任务类型（项目类型）  -1-全部  0-标题 1-价格 2-运费模板 3-预售 4-上下架 5-库存 6-主图 7-详细图 8-SKU规格 9-短标题 10-商品卖点 11-商品描述 12-类目9 9-其他
            'update_config': {
              'additionalProp1': [
                null
              ],
              'additionalProp2': [
                null
              ],
              'additionalProp3': [
                null
              ]
            },
            'update_status': 0, // 完成状态 -1 全部  0-进行中 1-已完成
            'total_count': 2,
            'success_count': 0,
            'fail_count': 0,
            'created_at': '2024-03-15 14:25:52',
            'updated_at': null,
            'num': 0
          }
        ],
        'page': 1,
        'size': 20,
        'total': 0
      },
      'code': 200,
      'msg': '成功'
    }
    console.log('后端返回的数据 => ', result)
    this.tableData = [
      {
        'push_update_goods_id': 1768523994975309824, // 任务Id
        'shop_code': '1391171890',
        'shop_name': '豆丢的甄选',
        productName: '【找不到】项目名称',
        'created_at': '2024-03-15 14:25:52',
        'update_status': -1,
        'total_count': 2,
        'success_count': 0,
        'fail_count': 2,
        desc: '【找不到】描述未获取链接原因'
      },
      {
        'push_update_goods_id': 2222222222222222222, // 任务Id
        'shop_code': 'id222',
        'shop_name': '豆丢的甄选',
        productName: '【找不到】项目名称',
        'created_at': '2024-03-15 14:25:52',
        'update_status': 1,
        'total_count': 2,
        'success_count': 2,
        'fail_count': 0,
        desc: '【找不到】描述未获取链接原因'
      }
    ]
    this.handleGetUpdateTaskPagelist()
  },
  methods: {
    handleGetUpdateTaskPagelist() {
      getUpdateTaskPagelist({
        // 【写死部分】
        PlatformCode: 3, // 平台编码  *
        ShopCode: '1391171890', // 店铺Id *
        // 【前端传入部分】
        PageIndex: this.paginaInfo.pageIndex, // 分页页码 默认从1开始  *
        PageSize: this.paginaInfo.pageSize, // 分页大小 默认20  *
        Type: this.shopForm.project, // 修改任务类型（项目类型）  -1-全部  0-标题 1-价格 2-运费模板 3-预售 4-上下架 5-库存 6-主图 7-详细图 8-SKU规格 9-短标题 10-商品卖点 11-商品描述 12-类目9 9-其他
        Status: this.shopForm.updateStatus // 完成状态 -1 全部PlatformCode0-进行中 1-已完成
      }).then(res => {
        console.log(res)
      })
    },
    // 查询表格数据。修改记录列表分页查询接口（/api/MoveHoseCopyTask/GetUpdateTaskPagelist）
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.handleGetUpdateTaskPagelist()
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    handleDetail(row) {
      console.log(row)
      this.detailInfo = {
        ...row,
        isShow: true
      }
    },
    // 删除（view层已处理为数组形式，故只需判断长度，然后处理数据格式）。修改任务删除(支持批量删)（/api/MoveHoseCopyTask/DeleteDistributionUpdateTask）
    handleDelete(row) {
      console.log(row)
      if (row.length) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const params = {
            Ids: []
          }
          params.Ids = row.map(item => ({
            PlatformCode: 3, // 平台编码  *
            ShopCode: item.shop_code, // 店铺Id
            TaskId: item.push_update_goods_id // 任务Id
          }))
          console.log('删除的接口入参 => ', params)
          // ↓↓↓接口请求完毕的消息↓↓↓
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      } else {
        this.$message({
          type: 'info',
          message: '请选择要删除的任务'
        })
      }
    },
    handleSelectionChange(val) {
      this.pageInfo.multipleSelection = val
      console.log(this.pageInfo.multipleSelection)
    },
    // 批量修改。修改任务详情列表分页查询接口（/api/MoveHoseCopyTask/GetUpdateTaskDetailPagelist）
    handleEdit(row) {
      console.log(row)
      if (row.length) {
        const params = {
          PageIndex: 1, // 分页页码 默认从1开始  *
          PageSize: 20, // 分页大小 默认20  *
          PlatformCode: 3, // 平台编码  *
          ShopCode: '222222222222222222', // 店铺Id *
          Ids: [], // 修改任务Id修改(记录列表任务Id字段对应该值,支持多个修改任务详情批量查询)
          Status: -1 // 完成状态 -1 全部 0进行中 1成功 2失败 3跳过
        }
        row.forEach(item => {
          params.Ids.push(item.push_update_goods_id)
        })
        console.log('批量修改的接口入参 => ', params)
      } else {
        this.$message({
          type: 'info',
          message: '请选择要批量修改的任务'
        })
      }
    },
    handleSizeChange(val) {
      this.paginaInfo.pageSize = val
      this.handleGetShopGoodsPageList()
    },
    handleCurrentChange(val) {
      this.paginaInfo.pageIndex = val
      this.handleGetShopGoodsPageList()
    }
  }
}
</script>

<style lang="scss" scoped>
p {
  margin: 0;
  line-height: 17px;
}
.shop-list-warpper {
  padding: 12px 20px 0;
  .list-form,
  .list-table {
    padding: 20px;
    background: #fff;
    border-radius: 4px;
  }
  .list-form {
    .create-time-col {
      overflow: scroll;
      &::-webkit-scrollbar {
        width: 5px;
        height: 5px;
        background-color: #f5f5f5;
      }
      &::-webkit-scrollbar-track {
        //-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
        background-color: #f5f5f5;
      }
      &::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background: rgb(173, 172, 172);
      }
    }
    .create-time {
      width: 375px;
      ::v-deep {
        .el-icon-time {
          display: none;
        }
      }
    }
  }
  .list-table {
    margin-top: 20px;
    .table-handle {
      .el-button {
        margin-left: 12px;
        &:first-of-type {
          margin-left: 0;
        }
      }
    }
    .table-box {
      margin-top: 20px;
      max-width: 100%;
      .table-shop-info {
        display: flex;
        align-items: center;
        p {
          margin-top: 4px;
          &:first-of-type {
            margin-top: 0;
          }
        }
        .table-shop-title {
          display: flex;
          align-items: center;
          span:nth-child(1) {
            flex: 1;
          }
          span:nth-child(2) {
            margin-left: 12px;
            color: #4E78EF;
            cursor: pointer;
          }
        }
      }
    }
  }
  .list-pagina {
    display: flex;
    justify-content: flex-end;
    margin-top: 17px;
    ::v-deep {
      .el-pagination.is-background {
        .el-pager li {
          background-color: #fff;
          border: 1px solid rgba(0,0,0,0.15);
          &:not(.disabled).active {
            color: #fff;
            background-color: #1890ff;
            border: none;
          }
        }
      }
      .btn-prev,
      .btn-next {
          background-color: #fff;
          border: 1px solid rgba(0,0,0,0.15);
      }
    }
  }
}
</style>
